<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>hide & show</title>
  <style>
    body {
      text-align: center;
    }

    ul {
      list-style: none;
    }

    li {
      margin: 0;
      padding: 0;
      display: inline-block;
      width: 30%;
    }
  </style>
</head>

<body>
  <ul id="list">
    <li>尼康(234)</li>
    <li>佳能(22)</li>
    <li>索尼(932)</li>
    <li>宾得(11)</li>
    <li>爱国者(3234)</li>
    <li>欧巴(32)</li>
    <li>海鸥(2334)</li>
    <li>卡西欧(334)</li>
    <li>三星(834)</li>
    <li>松下(234)</li>
    <li>其它品牌(2343)</li>
  </ul>

  <button data-toggle="brandlist">显示精简品牌</button>

  <script src="js/jquery-1.11.3.js"></script>
  <script>
    //为data-toggle="brandlist"绑定单击事件:
    //如果ul#list下有隐藏的元素，就显示全部
    //顺便改当前按钮内容为"精简显示品牌"
    //否则,隐藏5以上，但除最后一个元素之外的剩余元素
    //顺便改当前按钮内容为"显示所有品牌"
    $("[data-toggle=brandlist]").bind("click", function () {
      var $lis = $("ul>li:gt(4):not(:last-child)");
      console.log($lis);
      if ($lis.is(":visible")) {
        $lis.hide();
        $(this).html("显示所有品牌");
      } else {
        $lis.show();
        $(this).html("显示精简品牌");
      }

    })
  </script>
</body>

</html>